$(function() {

    $.ajax(baseUrl + '/slides', {
        success: function(res) {
            console.log('轮播数据：', res);
            console.log(baseUrl);
            console.log(res);
            const newHtml = template('swipe-id', { swipeList: res, baseUrl: baseUrl })
            console.log('-----------------');
            console.log(newHtml);
            console.log(newHtml[0]);
            console.log('-------------------');
            $('.sliderUl').html(newHtml);
            // console.log($('.Carousel'));
            var ul = document.querySelector('.sliderUl');
            let linum = document.querySelectorAll('.sliderUl li')
            console.log(ul);
            console.log('ul.lenght', ul.children.length - 1);
            console.log('linum', linum);
            // console.log(ul);
            let li = ul.children[0];
            let lastli = ul.children[ul.children.length - 1];
            console.log('li', li);
            console.log('lastLi', lastli);
            let cloneLi = li.cloneNode(true);
            let cloneLiLast = lastli.cloneNode(true);
            console.log('lengh', li.length);
            console.log('cloneLi', cloneLi);
            console.log('cloneLiLast', cloneLiLast);
            // let cloneLi = '<li>' + li[0].innerHTML + '</li>';
            // let cloneLiLast = '<li>' + li[li.length - 1].innerHTML + '</li>';
            $(cloneLi).insertAfter('.sliderUl li:last-child');
            $(cloneLiLast).insertBefore('.sliderUl li:eq(0)')
                // console.log('ulclone', ul.clone())
                // console.log('liclone', li.clone(true));
                // console.log('children', li[0]);
            console.log(ul);
            // $(ul).children[0].clone(true).append(ul);
            // $(ul).children[ul.children.length - 1].clone(true).insertBefore(ul)
            ul.style.left = -ul.children[0].offsetWidth + 'px';
            ul.style.width = ul.children.length * ul.children[0].offsetWidth + "px";
            timeFull()
            var Alltimer;

            function timeFull() {
                if (Alltimer) {
                    // clearInterval(Alltimer);
                    return
                }
                Alltimer = setInterval(() => {

                    // clearInterval(Alltimer);
                    // leftBtn();
                    rightBtn();
                }, 3000)
            }
            var rightMove

            function rightBtn() {
                // 

                // clearInterval(rightMove);

                if (rightMove || leftMove) {
                    return;
                }
                let rightX = ul.offsetLeft;
                let rightLi = ul.children[0].offsetWidth;
                let rightXCopy = rightX
                rightMove = setInterval(() => {

                    rightX -= 2;
                    // console.log(rightX);

                    ul.style.left = rightX + 'px';
                    if (-ul.offsetLeft > (ul.children.length - 1) * rightLi - 1) {

                        ul.style.left = -ul.children[0].offsetWidth + 'px';
                    }
                    if (-rightX >= -rightXCopy + rightLi) {
                        clearInterval(rightMove);
                        rightMove = 0;
                        index++;
                        console.log(index);
                        toggleClass()
                    }
                }, 1)

            }
            var leftMove

            function leftBtn() {
                // 

                // clearInterval(rightMove);

                if (rightMove || leftMove) {
                    return;
                }
                let leftX = ul.offsetLeft;
                let leftLi = ul.children[0].offsetWidth;
                let leftXCopy = leftX
                leftMove = setInterval(() => {

                    leftX += 2;
                    // console.log(leftX);

                    ul.style.left = leftX + 'px';
                    if (ul.offsetLeft >= -0) {

                        ul.style.left = -(ul.children.length - 2) * ul.children[0].offsetWidth + 'px';
                    }
                    if (leftX >= leftXCopy + leftLi) {
                        clearInterval(leftMove);
                        leftMove = 0;
                        index--;
                        toggleClass(index)
                    }
                }, 2)

            }
            // console.log(ul.children.length - 2);

            function toggleClass() {

                if (index >= ul.children.length - 2) {
                    index = 0;
                }
                if (index < 0) {
                    index = ul.children.length - 3
                }
                // console.log(index);
                $('.background_index > li').eq(index).addClass('whiteBG').siblings().removeClass('whiteBG');

            }
            $('.rightBtn').on('click', function() {
                console.log('right');
                clearInterval(Alltimer);
                Alltimer = null;
                rightBtn();
                timeFull();
                console.log(Alltimer);
            })
            $('.leftBtn').on('click', function() {

                // console.log('left');
                clearInterval(Alltimer)
                Alltimer = null;
                leftBtn();
                timeFull()
                    // console.log(Alltimer);
            })

            var index = 0;

            for (let i = 0; i < ul.children.length - 2; i++) {
                let indexLi = document.createElement('li');
                indexLi.style.cursor = 'pointer';
                // indexLi.style.backgroundColor = 'rgba(0, 0, 0, .7)';
                // indexLi.style.opacity = '0.35'
                indexLi.style.border = '1px solid white'
                indexLi.style.width = '15px';
                indexLi.style.height = '15px';
                indexLi.style.marginRight = '10px';
                indexLi.style.borderRadius = '50%';
                if (i == 0)
                    $(indexLi).addClass("whiteBG");

                $(indexLi).addClass('opcati');

                $('.background_index').append(indexLi);
            }

        },
        error: function(err) {
            console.log('err:', err);
        }
    })

})